<template>  
    <div ref="chart" style="width: 100%; height: 400px;"></div>  
  </template>  
    
  <script>  
  import { ref, onMounted, onBeforeUnmount } from 'vue';  
  import * as echarts from 'echarts';  
    
  export default {  
    name: 'Chart',  
    props: {  
      option: {  
        type: Object,  
        required: true,  
      },  
    },  
    setup(props) {  
      const chart = ref(null);  
    
      onMounted(() => {  
        chart.value = echarts.init(chart.value);  
        chart.value.setOption(props.option);  
        window.addEventListener('resize', chart.value.resize);  
      });  
    
      onBeforeUnmount(() => {  
        window.removeEventListener('resize', chart.value.resize);  
      });  
    
      return { chart };  
    },  
  };  
  </script>